<template>
  <div class="app-main-container">
    <div class="app-main-title">健康码配置</div>
    <el-form
      ref="ruleForm"
      class="doumee-form"
      :model="param"
      :rules="rules"
      label-width="100px"
      label-suffix="："
    >
      <el-form-item label="类型">
        <el-radio-group v-model="param.radio">
          <el-radio :label="3">安康码</el-radio>
          <el-radio :label="6">苏康码</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input
          v-model="param.name"
          required
          type="text"
          style="width: 700px"
          placeholder="请输入用户账号"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="param.mm"
          required
          type="password"
          style="width: 700px"
          placeholder="请输入密码"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="AppKey">
        <el-input
          v-model="param.AppKey"
          required
          type="text"
          style="width: 700px"
          placeholder="请输入AppKey"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="AppSecret">
        <el-input
          v-model="param.c"
          required
          type="text"
          style="width: 700px"
          placeholder="请输入AppSecret"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="redirectUrl">
        <el-input
          v-model="param.d"
          required
          type="text"
          style="width: 700px"
          placeholder="请输入redirectUrl"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item label="projectCode">
        <el-input
          v-model="param.f"
          required
          type="text"
          style="width: 700px"
          placeholder="请输入projectCode"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          @click="$message.info('权限不足')"
        >保存</el-button>
      </el-form-item></el-form>
  </div>
</template>

<script>
import {
  uploadFile,
  cardList,
  spaceList,
  startActivity,
  activityQueryForEdit,
  activitySaveForEdit
} from '@/api'
export default {
  data() {
    return {
      uploadFileUrl: uploadFile,
      vipTypeList: [],
      param: {
        venueId: sessionStorage.getItem('venueId'),
        id: '',
        poster: '',
        showPoster: '',
        applyEndTime: '',
        info: '',
        name: '',
        organizer: '',
        price: '',
        siteName: '',
        sponsor: '',
        startTime: '',
        endTime: '',
        theme: '',
        discountType: '',
        discountMap: {}
      },
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      uploadData: {
        folder: 'ACTIVITY_IMG',
        type: ''
      },
      lxList: [
        { value: '01', label: '团体课' },
        { value: '02', label: '私教课 ' }
      ],
      lmList: [
        { value: '01', label: '足球' },
        { value: '02', label: '篮球' },
        { value: '03', label: '羽毛球' }
      ],
      payStatusList: [
        { value: '0', label: '未支付' },
        { value: '1', label: '过期未付' },
        { value: '2', label: '已取消' },
        { value: '3', label: '已支付' }
      ],
      zkList: [
        { value: '0', label: '默认折扣' },
        { value: '1', label: '自定义折扣' }
      ],
      jlList: [],
      venueId: sessionStorage.getItem('venueId'),
      rules: {
        image: [{ required: true, message: '请上传课程图片', trigger: 'change' }],
        cd: [{ required: true, message: '请选择场地', trigger: 'blur' }]
      }
      // ,
      // projectList: [],
      // cqList: [],
      // cdList: []
    }
  },
  methods: {
    check_num(e) {
      this.param.rs[e] = this.param.rs[e].replace(/[^\d]/g, '')
    },
    getCardList() {
      // 获取卡类型列表
      cardList({
        pagination: {
          page: 1,
          rows: 1000
        },
        param: {
          cardName: null,
          isnormal: null,
          channel: null,
          type: '1'
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.vipTypeList = res.recordList
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上传图片成功
    uploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.param, 'showPoster', res.showUrl)
        this.$set(this.param, 'poster', res.insertUrl)
      } else {
        this.$message.error(res.msg || '上传失败')
      }
    },
    // 删除已上传图片
    deleteDeviceConfigAddImage() {
      this.$set(this.param, 'poster', '')
      this.$set(this.param, 'showPoster', '')
    },
    getActivityDetailInfo(activityId) {
      Promise.all([
        // 获取卡类型列表
        cardList({
          param: {
            cardName: null,
            isnormal: null,
            channel: null
          }
        }),
        activityQueryForEdit({
          param: {
            activityId
          }
        })
      ])
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.vipTypeList = res[0].recordList
          this.param = res[1].record
          const map = res[0].recordList
          const discountmap = res[1].record.discountMap
          console.log(map, discountmap)
          map.map((item) => {
            const value = discountmap[item.id]
            if (value) {
              item['creator'] = value
            } else {
              item['creator'] = ''
            }
          })
        })
        .catch(() => {})
    },
    getSpaceList(id) {
      this.$set(this.param, 'dd', [id, ''])
      spaceList({ param: { id }}).then((res) => {
        if (res.errorCode !== '000000') return
        this.cdList = res.recordList
      })
    },
    onSubmit() {
      if (!this.param.poster) {
        this.$message.error('请上传活动海报')
        return
      }
      if (!this.param.name) {
        this.$message.error('请输入活动名称')
        return
      }
      if (!this.param.price) {
        this.$message.error('请输入活动价格')
        return
      }
      if (!this.param.startTime) {
        this.$message.error('请选择活动开始时间')
        return
      }
      if (!this.param.endTime) {
        this.$message.error('请选择活动结束时间')
        return
      }
      if (!this.param.siteName) {
        this.$message.error('请输入场区场地')
        return
      }
      if (!this.param.applyEndTime) {
        this.$message.error('请选择报名截止时间')
        return
      }
      if (!this.param.theme) {
        this.$message.error('请输入活动主题')
        return
      }
      if (!this.param.organizer) {
        this.$message.error('请输入主办方')
        return
      }
      if (!this.param.sponsor) {
        this.$message.error('请输入承办方')
        return
      }
      if (!this.param.info) {
        this.$message.error('请输入活动详情')
        return
      }
      if (!this.param.discountType) {
        this.$message.warning('请选择折扣类型')
        return
      }
      var currentDate = new Date().getTime()
      var startTime = new Date(this.param.startTime).getTime()
      var endTime = new Date(this.param.endTime).getTime()
      var applyEndTime = new Date(this.param.applyEndTime).getTime()
      if (endTime < startTime) {
        this.$message.warning('活动结束时间不能早于活动开始时间')
        return
      }
      if (endTime <= currentDate) {
        this.$message.warning('活动结束时间不能早于当前时间')
        return
      }
      if (applyEndTime > startTime) {
        this.$message.warning('报名截止时间不能晚于活动开始时间')
        return
      }
      let param = JSON.stringify(this.param)
      param = JSON.parse(param)
      const map = {}
      if (this.$route.query.id) {
        // 编辑
        if (this.param.discountType === '1') {
          if (!this.vipTypeList.length) {
            this.$message.warning('暂无自定义折扣')
            return
          }
          param.discountmap = {}

          var discount = 0
          for (const item of this.vipTypeList) {
            if (item.creator) {
              map[item.id] = item.creator
              discount++
            }
          }

          if (discount !== this.vipTypeList.length) {
            this.$message.warning('请输入自定义折扣')
            return
          }
          param.discountMap = map
        }
        activitySaveForEdit({ param: param })
          .then((res) => {
            // console.log(res)
            if (res.errorCode === '000000') {
              this.$message.success('编辑成功')
              this.$router.go(-1)
            }
          })
          .catch((er) => {
            console.log(er)
          })
      } else {
        if (this.param.discountType === '1') {
          if (!this.vipTypeList.length) {
            this.$message.warning('暂无自定义折扣')
            return
          }
          var count = 0
          param.discountmap = {}
          for (const item of this.vipTypeList) {
            if (item.creator) {
              map[item.id] = item.creator
              count++
            }
          }
          if (count !== this.vipTypeList.length) {
            this.$message.warning('请输入自定义折扣')
            return
          }
        }
        param.discountMap = map
        startActivity({
          param: param
        })
          .then((res) => {
            if (res.errorCode === '000000') {
              this.$router.go(-1)
              this.$message.success('新增成功')
            // this.getOrderMessage(res.record)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    }
    // toGetProjectList() {
    //   const venueId = this.venueId
    //   getProjectList({ param: { venueId, status: '1' }}).then((res) => {
    //     this.projectList = res.recordList
    //   })
    // },
    // toGetAreaList() {
    //   const venueId = this.venueId
    //   getAreaList({ param: { venueId }}).then((res) => {
    //     this.cqList = res.recordList
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
.division-line {
  text-align: center;
  display: inline-block;
  color: #999;
  width: 50px;
}
</style>
